<template>
    <div class="page animate__animated animate__fadeIn">
        <el-card :bordered="false" shadow="never" class="ivu-mt" :body-style="{ padding: '16px 20px 0' }">
            <el-button type="success" size="small" icon="el-icon-plus" @click="addPermission()">新增</el-button>
            <el-table v-loading="isLoading" size="small" header-cell-class-name="table_header_cell" :data="list" class="table-mt">
                <el-table-column prop="role_id" label="角色ID">
                </el-table-column>
                <el-table-column prop="role_name" label="角色名称">
                </el-table-column>
                <el-table-column prop="create_time" label="添加时间">
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="160px">
                    <template slot-scope="scope">
                        <el-button type="text" @click="editPermission(scope.row)">编辑</el-button>
                        <el-button type="text" @click="delRole(scope.row.role_id)">删除</el-button>
                    </template>
                </el-table-column>
                <div slot="empty" class="empty">
                    <el-empty description="暂无数据" />
                </div>
            </el-table>

            <pagination v-if="total" :total="total" :page.sync="page" :limit.sync="limits" @pagination="getList" />
        </el-card>
        <add-permission @reload="reload" ref="addPermission" :treeList="treeList"></add-permission>
        <edit-permission :scopeRow="scopeRow" @reload="reload" ref="editPermission" :treeList="treeList"></edit-permission>
    </div>
</template>

<script>
import { getRoleList, deleteRole, getAllPer } from "@/api/staff.js";
import addPermission from "./components/addPermission.vue";
import editPermission from "./components/editPermission.vue";
export default {
    components: {
        addPermission,
        editPermission,
    },
    data() {
        return {
            isLoading: false,
            list: [],
            treeList: [],
            scopeRow: {},
            page: 1,
            limits: 15,
            total: 0,
        };
    },
    created() { },
    mounted() {
        this.getList();
    },
    methods: {
        addPermission() {
            this.getAllDom();
            setTimeout(() => {
                this.$refs.addPermission.add();
            }, 300);
        },
        editPermission(row) {
            this.scopeRow = row ? row : {};
            this.getAllDom();
            setTimeout(() => {
                this.$refs.editPermission.add();
            }, 300);
        },
        reload() {
            // this.list = [];
            this.getList();
        },
        handleCurrentChange(obj) {
            this.page = obj.currentPage;
            this.getList();
        },
        getList() {
            this.isLoading = true;
            getRoleList({
                page: this.page,
                limits: this.limits,
            }).then((res) => {
                if (res.code == 0) {
                    this.list = res.data.data;
                    this.total = res.data.total;
                }
                this.isLoading = false;
            });
        },
        getAllDom() {
            getAllPer().then((res) => {
                if (res.code == 0) {
                    res.data.forEach((element) => {
                        element.children = element.secondPerList;
                        element.children.forEach((v) => {
                            v.children = v.thirdPerList;
                        });
                    });
                    this.treeList = res.data;
                }
            });
        },
        async delRole(id) {
            let res = await this.$getCsrToken();
            this.$confirm("您确定要删除该条记录吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    console.log("res", res);
                    if (res.code == 0) {
                        deleteRole({
                            role_id: id,
                        }).then((res) => {
                            console.log("删除角色");
                            if (res.code == 0) {
                                this.$message({
                                    message: res.msg,
                                    type: "success",
                                });
                                this.getList();
                            }
                        });
                    }
                })
                .catch(() => { });
        },
    },
};
</script>

<style scoped>
.user-search {
    margin-top: 20px;
}

.userRole {
    width: 100%;
}
.table-mt {
    margin-top: 20px;
}
</style>